<template>
  <div class="app-container">
    <Find :OriginalFilter="{ static: true }" :formList="formList" @Launchform="Launchform" @findClicked="findClicked" />
    <div class="container mt24 flex">
      <el-card shadow="never" :body-style="{ padding: '5px' }" style="margin-right: 20px; width: 23%">
        <div slot="header" class="mb9 f16">
          <span style="font-weight: 600">型体资料</span>
        </div>
        <Table
          :tableData="TableDateList.list"
          :tableHeader="tableHeader"
          :TableHeight="100"
          :outTableHeight="100"
          selection
          @currentRow="currentRow2"
          :isLoading="isLoading"
        />
        <PageModule
          :PageData="{ total, pageSizeShow: true, buttonS: true }"
          :layout="'prev, pager'"
          @pageSizeChange="handleSizeChange"
          @pageChange="handleCurrentChange"
        />
      </el-card>

      <el-card shadow="never" :body-style="{ padding: '12px 10px 12px' }">
        <div slot="header" class="mb9 f16">
          <span style="font-weight: 600">型体生产工艺</span>
        </div>
        <Table :tableData="TableDateListKt" :tableHeader="tableHeader2" :TableHeight="100" :outTableHeight="135" :isLoading="isLoading1" />

        <div class="flex mt24" style="justify-content: space-between">
          <el-checkbox @change="ClickTheOptionBox" v-model="checked" label="有设定生产工艺的部位" size="large" />
        </div>
        <PageModule :PageData="{ pageSizeShow: true }" />
      </el-card>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import JMessage from '@/utils/JMessage'
export default defineComponent({
  name: 'MoldProcessQueryKa'
})
</script>
<script lang="ts" setup>
import { i18n, Jzhcn } from '@/i18n'
import { ref, onMounted } from 'vue'
import { TypeDataParametersDate, AcquireTheMoldProductionProcess } from '@/api/GeneralManager/Factoryinquiry/MoldingProcess'
import type {
  TypeDataParametersInterface,
  TypeDataParameters,
  ObtainTheProcessParametersOfMoldProduction,
  listOtle
} from '@/api/GeneralManager/Factoryinquiry/MoldingProcess'
const formList = ref([
  {
    type: 'input',
    inputPlaceholder: '请输入型体',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入颜色',
    inputValue: ''
  },
  {
    type: 'button',
    checkboxLabel: '置空',
    bgColor: '#1890FF'
  }
])

const isLoading = ref(true)

const isLoading1 = ref(true)

const ClickTheOptionBox = () => {
  if (checked.value) {
    ObtainTheMoldProductionProcessPparameters.value.flag = '1'
    GetTypeProductionData()
  } else {
    ObtainTheMoldProductionProcessPparameters.value.flag = ''
    GetTypeProductionData()
  }
}

const currentRow2 = (row: any) => {
  const { style, color } = row || {}
  ObtainTheMoldProductionProcessPparameters.value.color = color
  ObtainTheMoldProductionProcessPparameters.value.style = style
  if (style !== '' || color !== '') {
    GetTypeProductionData()
  }
}

// 参数
const GetFormDataParameters = ref<TypeDataParameters>({
  color: '',
  pageNum: 1,
  pageSize: 40,
  style: ''
})

// 数据
const TableDateList = ref<TypeDataParametersInterface>({
  total: 0,
  list: []
})

// 获取型体生产数据
const GetTypeProductionData = async () => {
  isLoading1.value = true
  const result = await AcquireTheMoldProductionProcess(ObtainTheMoldProductionProcessPparameters.value)
  TableDateListKt.value = result.list
  isLoading1.value = false
}

const imgList = ref<any>([])

const ObtainTheMoldProductionProcessPparameters = ref<ObtainTheProcessParametersOfMoldProduction>({
  style: '',
  color: '',
  flag: ''
})

const TableDateListKt = ref<listOtle[]>()

// 获取型体资料
const GetFormData = async () => {
  isLoading.value = true
  const result = await TypeDataParametersDate(GetFormDataParameters.value)
  TableDateList.value.list = result.list
  const { style, color } = (result.list[0] as any) || {}
  total.value = result.total!
  ObtainTheMoldProductionProcessPparameters.value.color = color
  ObtainTheMoldProductionProcessPparameters.value.style = style
  isLoading.value = false
  if (style !== '' || color !== '') {
    GetTypeProductionData()
  }

  imgList.value = result.list.map((item: any) => {
    return item.photoPath
  })
}

const tableHeader = ref([
  {
    label: '型体',
    prop: 'style',
    width: '55'
  },
  {
    label: '颜色',
    prop: 'color',
    width: '68'
  },
  {
    label: '颜色代码',
    prop: 'colorCode',
    width: '68'
  },
  {
    label: '图片',
    fixed: true,
    prop: 'photoPath',
    type: 'img',
    srcList: imgList
  }
])

const tableHeader2 = ref([
  {
    label: '序号',
    prop: 'seqNo'
  },
  {
    label: '部位名称',
    prop: 'partName'
  },
  {
    label: '材料名称',
    prop: 'mtlName'
  },
  {
    label: '材料单位',
    prop: 'mtlUnit'
  },
  {
    label: '裁层',
    prop: 'cutLayer'
  },
  {
    label: '每双片数',
    prop: 'cutNum2'
  },
  {
    label: '每刀片数',
    prop: 'cutNum'
  },
  {
    label: '裁次',
    prop: 'cutSeq'
  },
  {
    label: '入库部门',
    prop: 'deptName'
  },
  {
    label: '工艺1',
    prop: 'process1'
  },
  {
    label: '工艺2',
    prop: 'process2'
  },
  {
    label: '工艺3',
    prop: 'process3'
  },
  {
    label: '工艺4',
    prop: 'process4'
  },
  {
    label: '工艺5',
    prop: 'process5'
  },
  {
    label: '工艺6',
    prop: 'process6'
  },
  {
    label: '工艺7',
    prop: 'process7'
  },
  {
    label: '工艺8',
    prop: 'process8'
  },
  {
    label: '工艺9',
    prop: 'process9'
  },
  {
    label: '工艺10',
    prop: 'process10'
  }
])

const checked = ref(false)

// 统一调用接口
const interAceFunct = () => {
  // 鞋面入库选择指令函数
  GetFormData()

  // Find下拉框数据
  // GetDepartmentData()
}

onMounted(() => {
  interAceFunct()
})

const total = ref(0)

const handleSizeChange = (val: number) => {
  isLoading.value = true
  GetFormDataParameters.value.pageSize = val
  GetFormData()
}

const handleCurrentChange = (val: number) => {
  isLoading.value = true
  GetFormDataParameters.value.pageNum = val
  GetFormData()
}

const Launchform = (row: any) => {
  GetFormDataParameters.value.style = row[0].inputValue
  GetFormDataParameters.value.color = row[1].inputValue
  GetFormData()
}

const findClicked = (find: any) => {
  if (find === '置空') {
    clearFormList1()
  }
}

const clearFormList1 = () => {
  formList.value.forEach((item) => {
    if (item.type === 'input') {
      item.inputValue = ''
    }
    // Add other conditions for different form item types
  })
}
</script>

<style lang="less" scoped>
.btns {
  display: flex;
  justify-content: end;
  margin: 10px 20px 10px;

  .bg {
    background-color: #e7e7e7;
    border: 1px solid #e7e7e7;
    color: #000000;
  }
}
</style>
